<template>
  <div>
    <van-popup v-model:show="show" position="bottom" :style="{ height: '50%' }" />
    <van-popup
      v-model:show="show"
      closeable
      close-icon="close"
      position="bottom"
      :style="{ height: '90%' }"
    >
      <div class="fruit-frequency">
        <h2>您多久吃一次水果</h2>
        <div class="img">
          <van-image src="../../public/OIPvv-C.jpg" />
        </div>
        <div>
          <van-slider v-model="frequency" step="1" min="0" max="4" bar-height="4px" />
          <div class="frequency-label">
            <span>从不</span>
            <span>经常</span>
          </div>
        </div>
        <van-button type="primary" @click="$router.push('/healthy')" class="submit-button"
          >下一步</van-button
        >
      </div>
    </van-popup>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(false)
function fnn() {
  show.value = ref(true)
}
fnn()
const frequency = ref(2)
</script >
<style  scoped lang="css">
.fruit-frequency {
  /* text-align: center; */
  padding: 20px;
}
.van-slider {
  color: rgb(150, 134, 250);
}
.frequency-label {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  margin-top: 10px;
}

.submit-button {
  margin-top: 90px;
  width: 90%;
  margin-left: 18px;
  background: rgb(109, 93, 210);
  border-radius: 10px;
}
.van-image {
  width: 100px;
  height: 100px;
}
.img {
  display: flex;
  width: 180px;
  height: 180px;
  background: rgb(247, 247, 252);
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  margin: 60px auto;
}
</style>
